<template>
  <div>
    <SpRouterView class="merchantList">
      <div class="action-container">
        <el-button type="primary" @click="exportData"> 导出 </el-button>
      </div>

      <el-table
        v-loading="loading"
        border
        :data="list"
        style="width: 100%"
        element-loading-text="数据加载中"
      >
        <el-table-column prop="category_name" label="分类名称" />
        <el-table-column prop="num" label="数量" />
      </el-table>
      <div class="content-padded content-center">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="page.pageIndex"
          :total="total_count"
          :page-size="page.pageSize"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </SpRouterView>
  </div>
</template>

<script>
// import moment from 'moment'
import { pageMixin } from '@/mixins'
import { mapGetters } from 'vuex'
export default {
  mixins: [pageMixin],
  data() {
    return {
      loading: false,
      list: [],
      total_count: 0
    }
  },

  watch: {
    $route(to, from) {
      if (to.meta?.routeId === 'agent-id') {
        this.fetchList()
      }
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    exportData() {
      this.$api.goods.exportItemsCategory().then((response) => {
        console.log(response)
        const { status, url, filename } = response
        if (status) {
          this.$message.success('已加入执行队列，请在设置-导出列表中下载')
          this.$export_open('category_goods_statistics')
          return
        } else if (url) {
          window.open(url)
        } else {
          this.$message.error('无内容可导出或执行失败，请检查重试')
          return
        }
      })
    },
    // 代理商列表查询
    fetchList() {
      this.loading = true
      const { pageIndex: page, pageSize } = this.page
      let params = {
        page,
        pageSize
      }
      this.$api.goods.listItemsCategory(params).then((res) => {
        console.log('getTheAgentList', res)
        this.list = res.list
        this.total_count = Number(res.total_count)
        // this.datapass_block = res.data.data.datapass_block
        this.loading = false
      })
    },
    // 查询
    onSearch() {
      // this.$refs.finder.refresh(true)
      this.fetchList()
    }
  },
  computed: {
    ...mapGetters(['wheight'])
  }
}
</script>

<style lang="scss">
.merchantList {
  .yahh {
    color: #409eff;
  }
}
.form-item-detail {
  margin-bottom: 0;
}
.sp-filter-form {
  margin-bottom: 16px;
}
</style>
